import 'swiper/css';
import './style.scss'
import React, {useState} from "react";
import {useRequest} from "ahooks";
import {getHome} from "@/api/home";
import {HomeProps} from "@/containers/Home/type.ts";
import Banner from "@/containers/Home/components/Banner.tsx";
import Category from "@/containers/Home/components/Category.tsx";
import Card from "@/containers/Home/components/Card.tsx";
import Docker from "@/containers/Home/components/Docker.tsx";

const Home: React.FC = () => {
    // **1. 定义状态**
    const [requestData, setRequestData] = useState<HomeProps>({
        categories: [],
        banners: [],
        freshes: [],
        location: {
            id: '',
            address: ''
        },
    });

    // **2. 发起请求**
    useRequest<HomeProps, []>(() => getHome<HomeProps>(), {
        onSuccess: (res) => {
            setRequestData(res); // ✅ 直接赋值，不需要 `data.data`
        },
    });

    return (
        <div className="home-page">
            {/* 头部 Banner */}
            <Banner banners={requestData.banners} location={requestData.location}/>

            {/* 分类展示 */}
            <Category categories={requestData.categories}/>

            {/*  卡片  */}
            <Card freshes={requestData.freshes}/>

            {/*到底*/}
            <div className={"bottom"}>- 我是有底线的 -</div>

            {/*  导航栏  */}
            <Docker/>
        </div>
    );
};

export default Home;
